
<template>
	<div class="bind-phone-wrap" v-if="user.alter_bind_phone && !user.no_more_prompts">
		<alert-bind-phone v-show="bindPhoneShow && !active">
			<template #close>
				<i class="close-icon" @click="closeTips"></i>
			</template>
			<template #content>
				<div class="content">检测到您的账号安全程度较低，需要您绑定手机号以保证账户安全。</div>
			</template>
			<template  #footbtn><div class="alert-bind-btn" @click="bindPhone">绑定</div><div class="alert-bind-a-wrap" style="margin-top: 1.25rem;"><a class="alert-bind-a" @click="showBindNext">不绑定</a></div></template>
		</alert-bind-phone>
		<alert-bind-phone v-show="!bindPhoneShow && !active">
			<template #close>
				<i class="close-icon" @click="closeTips"></i>
			</template>
			<template #content>
				<div class="content">不绑定手机号，则无法使用找回密码功能，一旦发生资产流失本平台概不负责！</div>
			</template>
			<template #footbtn><div class="alert-bind-btn" @click="bindPhone">绑定</div><div class="alert-bind-a-wrap" style="margin-top: 1.25rem;"><a class="alert-bind-a" @click="noTips">不再提示</a></div></template>
		</alert-bind-phone>
		<div class="bind-phone-outer-wrap" :class="{'active':active}" ref="bindouterwrap">
			<bind-phone :steps="nosteps" @close-bind="isActive"></bind-phone>
		</div>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import alertBindPhone from '@/views/alert_bind_phone/index'
	import bindPhone from '@/views/reg/components/bindPhone'
	import {noMorePrompts} from '@/api/login'
	export default{
		name:'bindTips',
		components:{
			alertBindPhone,
			bindPhone	
		},
		data(){
			return{
				//手机绑定
				bindPhoneShow:true,
				active:false,
				nosteps:false,
				
			}
		},
		computed:{
			...mapGetters([
			  'user',
				'token'
			])
		},
		methods:{
			showBindNext(){
				this.bindPhoneShow = false
			},
			noTips(){
				noMorePrompts().then(res=>{
				}).catch(err=>{
					console.log(err)
				})
				this.user.alter_bind_phone = false
			},
			bindPhone(){
				this.active = true
			},
			isActive(){
				if(!localStorage.getItem("noalertbind_"+this.user.uid)){
					localStorage.setItem("noalertbind_"+this.user.uid,true)
				}
				this.active = !this.active
				this.user.alter_bind_phone = false
			},
			closeTips(){
				if(!localStorage.getItem("noalertbind_"+this.user.uid)){
					localStorage.setItem("noalertbind_"+this.user.uid,true)
				}
				this.user.alter_bind_phone = false
			}
		},
		mounted(){
			if(this.$refs.bindouterwrap){
				this.$refs.bindouterwrap.addEventListener("touchmove",(e)=>{
					e.preventDefault()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>
